<template>
  <h1>{{ money }}</h1>
  <h2>{{ count }}</h2>
  <button @click="money += 1000">老板加钱</button>
  <button @click="count++">老板加人</button>
  <h3>用户信息{{ user }}</h3>
  <button @click="user.age++">用户年龄增加</button>
  <button @click="user.name += '啊'">点击用户啊一下</button>
</template>

<script setup lang="ts">
/**
 * 学习目标：
 *    watch 侦听器(监听), 接收三个参数
 *      1. 参数1: 监视的数据源
 *      2. 参数2: 回调函数
 *      3. 参数3: 额外的配置
 *
 */
import { ref, watch } from 'vue'

// 监听单个ref
// const money = ref(15000)
// watch(money, (val, oldVal) => {
//   console.log('money变化了，新值为', val)
// })

// 监听多个ref
const money = ref(15000)
const count = ref(30)
watch([money, count], (val) => {
  console.log('money或count变化了，新值为', val)
})

// 监听ref复杂数据
const user = ref({
  name: 'zs',
  age: 18,
})
// watch(
//   user,
//   (val) => {
//     console.log('user发生变化的回调函数')
//   },
//   {
//     deep: true,
//     immediate: true,
//   },
// )

// 监听对象的某个属性的变化
watch(
  () => {
    // 需要写成函数写法
    return user.value.age
  },
  (val) => {
    console.log('你的对象年龄变化了', val)
  },
)
</script>
